import React, { Fragment, useRef, useEffect, CSSProperties } from 'react'
import { Row, Col } from 'antd'
import { IMeta, IConfig, IData } from '../../../../dnd/component_type'
import * as echarts from 'echarts'
import { articleApi } from '../../../../../api'

interface IProps {
  meta: IMeta,
  config: IConfig,
  data: IData,
  children?: any;
}

const targetData:any = {
  // '2010': [
  //   {
  //     label: 'A',
  //     value: 300
  //   },
  //   {
  //     label: 'B',
  //     value: 134
  //   },
  //   {
  //     label: 'C',
  //     value: 240
  //   },
  //   {
  //     label: 'D',
  //     value: 166
  //   },
  //   {
  //     label: 'E',
  //     value: 223
  //   }
  // ],
  '2010': [345, 234, 88, 353, 122],
  '2011': [88, 353, 345, 234, 122],
  '2012': [239, 61, 118, 1903, 308],
  '2013': [161, 21, 44, 21, 134],
  '2014': [321, 262, 101, 71, 291],
  '2015': [16, 162, 180, 35, 142],
  '2016': [26, 250, 325, 179, 283],
  '2017': [172, 143, 99, 31, 8],
  '2018': [179, 283, 26, 250, 225],
  '2019': [172, 143, 99, 31, 8],
  '2020': [210, 259, 126, 70, 114],
}

console.log(targetData[2010].map((d: any) => d.value))

export default function DynamicChartPreview (props: IProps) {
  const { config, data, meta } = props
  const articleCountRef: any = useRef()

  const countryColors = {
    A: '#00dd8b',
    B: '#ed2939',
    C: '#ffde00',
    D: '#002a88',
    E: '#aa3580',
  };

  const updateFrequency = 3000;

  useEffect(() => {
    const t = Object.keys(targetData)
    for (let i = 0; i < t.length - 1; i++) {
      (function (i) {
        setTimeout(function () {
          run(targetData[t[i]], t[i]);
        }, i * updateFrequency);
      })(i);
    }

    // run(targetData['2010'], '2010');
  }, [])

  const run = (chartData: any, year: string) => {
    let articleCountChart = echarts.init(articleCountRef.current)

    var option: any = {
      title: {
        text: config.attr.title + year,
        // textAlign: 'center',
      },
      xAxis: {
        max: 'dataMax',
      },
      yAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E'],
        inverse: true,
        animationDuration: 500,
        animationDurationUpdate: 500,
        max: 3 // only the largest 3 bars will be displayed
      },
      series: [
        {
          realtimeSort: true,
          name: 'X',
          type: 'bar',
          // data: targetData[2010].map((d: any) => d.value),
          // data: targetData[2010],
          data: chartData,
          label: {
            show: true,
            position: 'right',
            valueAnimation: true
          },
          itemStyle: {
            color: function (param: any) {
              console.log('999', param)
              return countryColors[param.name] || '#5470c6';
            }
          },
        }
      ],
      legend: {
        show: false
      },
      animationDuration: 0,
      animationDurationUpdate: 3000,
      animationEasing: 'linear',
      animationEasingUpdate: 'linear'
    };

    articleCountChart.setOption(option);
  }

  return (
    <Fragment>
      <Row gutter={16}>
        <Col span={24} >
          <div style={ config.style } ref={ articleCountRef } />
        </Col>
      </Row>
    </Fragment>
  )
}